<template>
  <div>
    <van-search
      shape="round"
      v-model="value"
      placeholder="请输入搜索关键词"
      @input="inputFn"
      />
    
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="resultList.length===0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          v-for="(obj,index) in hotAll"
          :key="index"
          @click="fn(obj.first)"
          class="hot_item"
          >{{obj.first}}</span
        >
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <SongItem
          v-for="obj in resultList"
          :key="obj.id"
          :name="obj.name"
          :author="obj.ar[0].name"
          :id="obj.id"
      ></SongItem>
      </van-list>
    </div>
  </div>
</template>
<script>
// 修复小bug 无数据情况 数据只有一页情况  输入之后点击热榜一直加载 
// 造成原因三个函数都是独立的操作没回其他操作需要进行初始化finished
// 优化频繁请求防抖 原理利用定时器进行延时操作 当事件重新调用时重置定时器
import {hotSearchAPI,searchResultListAPI} from '@/api'
import SongItem from '../../components/SongItem.vue'
export default {
  data(){
    return {
      value:'',//存储点击的关键词
      hotAll:[],//热搜关键词
      resultList:[],//搜索结果
      finished:false,//未加载全部 为true不在加载 表示加载完毕
      loading:false,//加载中 触底触发onload
      page: 1,
    }
  },
  async created() {
    const res=await hotSearchAPI();
    //console.log(res);
    this.hotAll=res.data.result.hots;
  },
 components:{
    SongItem
  },
  methods:{
    // 定义一个函数用来接收搜索结果 在适当的地方调用
    async getListFn(){
      return await searchResultListAPI({
        keywords: this.value,
        limit: 20,
        offset: (this.page - 1) * 20,
      })
    },
    async fn(val){
      this.page = 1;
      this.finished = false;
      this.value=val
      const res=await this.getListFn();
      console.log(res);
      this.resultList=res.data.result.songs;
      this.loading = false;
    },
    async inputFn(){
       
       if (this.timer) clearTimeout(this.timer);
       this.timer=setTimeout(async ()=>{
         this.page = 1;
         this.finished = false
         if (this.value.length===0) {
        this.resultList=[];
        return
      }
      const res=await this.getListFn();
      if (res.data.result.songs === undefined){
        this.resultList=[];
        return
      }
      this.resultList=res.data.result.songs
      this.loading = false;
       },900)
      
    },
    async onLoad(){
       // 触底事件(要加载下一页的数据咯), 内部会自动把loading改为true
       this.page++;
       const res=await this.getListFn();
        if (res.data.result.songs === undefined) { // 没有更多数据了
          this.finished = true; // 全部加载完成(list不会在触发onload方法)
          this.loading = false; // 本次加载完成
          return;
       }
       this.resultList=[...this.resultList, ...res.data.result.songs];
       this.loading=false
    }
  }
}
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>